<template>
<div class="Picture">

    <!-- <h1>{{ sum }}</h1>
    <button @click="addSum">add sum </button> -->

    <img v-for="(item, index) in dogList" :key="index" :src="item">
    <hr>

    <button @click="getDog">获取狗图</button>
</div>
</template>

<script setup lang="ts" name="Picture">
import useDogs from '../hooks/useDogs.ts';

const {
    dogList,
    getDog
} = useDogs();

</script>

<style scoped>
.Picture {
    color: #888;
}

img {
    height: 100px;
}

button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #369870;
}
</style>
